<template>
    <div style="background: #fdf8ff">
        <el-descriptions column=1 style="margin-left: 20px" title="用户详情">
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="用户编号">
                {{row.userId}}
            </el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="用户名">
                {{row.userName}}
            </el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider> <!--分割线隔开-->

        <div>
            <div style="margin-top: 30px;margin-left: -1290px"><b>用户头像</b></div>
            <div>
                <el-avatar v-show="row.userProfilePictureSrc ==null" icon="el-icon-user-solid" style="margin-left: -1100px"></el-avatar>
            </div>
            <el-image v-show="row.userProfilePictureSrc!=null"
                                     style="width: 80px; height: 80px; margin-left: -1000px; cursor:pointer;border-radius: 50%;"
                                     :src="require('@/assets/img/userProfilePictures/'+row.userProfilePictureSrc)"
                                     fit="contain">
        </el-image>
        </div>
        <el-divider></el-divider> <!--分割线隔开-->

        <el-descriptions column=1 style="margin-left: 20px" title="基本信息">
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="用户昵称">
                {{row.userNickname}}
            </el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="用户姓名">
                {{row.userRealname}}
            </el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="用户性别">
                {{row.userGender}}
            </el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="出生日期">
                {{row.userBirthday}}
            </el-descriptions-item>
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="所在地">
                {{row.userGender}}
            </el-descriptions-item> <!---->
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="籍贯">
                {{row.userGender}}
            </el-descriptions-item>  <!--地址报错所以我先用gender代替-->
            <el-descriptions-item label-style="margin-top:20px" content-style="margin-top:20px" label="为其初始化密码">
                <el-link :disabled="viewFlag" @click="initPassword(row.userId)" type="primary">
                    初始化密码为：123456
                </el-link>
            </el-descriptions-item>
        </el-descriptions>

        <el-divider></el-divider>

        <div><span style="margin-left: -1130px"><b>购物车信息</b></span>
            <el-table border :header-cell-style="{background : 'rgba(72,121,129,0.38)'}"
                      :data="row.productOrderItemList" style="width: 90%;margin-left: 60px;margin-top: 30px"
                      max-height="300">
                <el-table-column align="center" fixed prop="productOrderItemProduct.productName" label="产品图片"
                                 width="200"></el-table-column>
                <el-table-column align="center" prop="productOrderItemProduct.productName" label="产品名称"
                                 width="200"></el-table-column>
                <el-table-column align="center" prop="productorderitemPrice" label="产品单价" width="150"></el-table-column>
                <el-table-column align="center" prop="productorderitemNumber" label="购买数量"
                                 width="150"></el-table-column>
                <el-table-column align="center" prop="totalPrice" label="总计价格" width="150"></el-table-column>
                <el-table-column align="center" prop="productorderitemUserMessage" label="用户备注"
                                 width="120"></el-table-column>
                <el-table-column align="center" fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-link @click="getShopCar(scope.row.productOrderItemProduct.productId)" type="primary">详情
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-divider></el-divider>
    </div>
</template>

<script>
    export default {
        name: "UserDetail",
        data() {
            return {
                row: {           //用户表里传过来的一行用户数据
                    userProfilePictureSrc: ''
                },
                viewFlag:false,    //如果是查看就禁用
            }
        },
        methods: {
            getRowData() {   //初始化该组件的数据
                this.row = this.$route.params.userData;
                this.viewFlag = this.$route.params.flag == 'view' ? true :false;
                console.log("用户详情", this.row)
            },
            initPassword(userId) {
                this.$confirm('确认为其初始化密码嘛?，该操作存在巨大危险！', '初始化提示', {
                    confirmButtonText: '已获授权，不惧风险',
                    cancelButtonText: '点错了~~',
                    type: 'warning'
                }).then(() => {        //确认初始化用户密码
                    this.$axios.put(`/api/user/initPassword/${userId}`).then(res => {
                        if (res.data == 1) {
                            this.$message({
                                message: '初始化成功，快去通知用户',
                                type: "success",
                                showClose: true,
                                center: true
                            })
                        } else {
                            this.$message({
                                showClose: true,
                                type: "error",
                                message: "初始化发生错误",
                                center: true
                            })
                        }
                    })
                })

            },
        },
        created() {       //先渲染数据
            this.getRowData()
        },
    }
</script>

<style scoped>

</style>
